<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- <link rel="stylesheet" href="css/mui.min.css"> -->
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/swiper.min.js"></script>
		<script src="js/upBirth.js" ></script>
		<script type="text/jscript" src="js/guzhangdeng.js"></script>
		<script charset="UTF-8" src="js/config.js"></script>
		<script charset="UTF-8" src="js/core.js"></script>
		<script charset="UTF-8" src="js/cipher-core.js"></script>
		<script charset="UTF-8" src="js/tripledes.js"></script>
		<script charset="UTF-8" src="js/mode-ecb.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/spin.min.js"></script>
		<script type="text/javascript" src="js/template-web.js"></script>
		<script type="text/javascript" src="js/mapDetail.js"></script>
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<title></title>
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
		</style>
	</head>
	<body>
		<div class="nav_con">
			<div style="width: 10%;height: 100%;float: left;" onclick="backIndex()"><img onclick="backIndex()" class="nav_icon float_l" src="img/nav_icon_bar@2x.png"></div>
			<div style="width: 80%;height: 100%;float: left;">生日</div>
			<div class="clear"></div>
		</div>
		<div class="cd_nr">
			<div class="password_change">
				<div class="login_input_con">
					<p class="sr_tille">设置出生日期</p>
					<div class="login_ph">
						<input readonly="readonly"  id="birthday" style="width: 90%;" type="text" data-options='{"type":"date","beginYear":1900,"endYear":2019}' class="btn sr_input " placeholder="请选择出生日期">
					</div>
					<img class="float_r sr_date_icon" src="img/icon_rl@2x.png">
				</div>
			</div>
		</div>
		<script src="js/mui.picker.min.js"></script>
		<script>
			var loginData = JSON.parse(localStorage.getItem("LoginData"))
			var oldBirth = loginData.birthday
			if(loginData!=null){
				$("#birthday").val(oldBirth)
			}
			(function($) {
				$.init();
				var result = $('#birthday')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								result.value = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							options.endDate = new Date()
							if(result.value != '' && result.value != null){
								options.value = oldBirth		
							}
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.value = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui);
		</script>
	</body>

</html>